jQuery — First Elements and Focus

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

:first-child Selector

We can use the :first-child selector to get the first child element.

For example, if we have the following HTML:

<div>
  <span>Glen,</span>
  <span>Jane,</span>
  <span>Ralph</span>
</div>

And the following CSS:

.green {
  color: green
}

Then we can write:

$("div span:first-child")
  .css("text-decoration", "underline")
  .hover(function() {
    $(this).addClass("green");
  }, function() {
    $(this).removeClass("green");
  });

to get the first span in the div with the :first-child selector.

Then we called css to add the underline to the first span.

And finally we add hover to it with hover .

The first callback is called when we hover over the element, and the second one is called when we hover away from it.

:first-of-type Selector

We can use the :first-of-type selector to select all elements that are the first among the siblings with the same element name.

For example, if we have the following HTML:

<div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph</span>
</div>
<div>
  <b>Nobody,</b>
  <span>John,</span>
  <span>Scott,</span>
  <span>Tim</span>
</div>

and the following CSS:

.green {
  color: green
}

Then we can add the green class to the first span in each div by writing:

$("span:first-of-type").addClass("green");

:first Selector

The :first select lets us select the first matched DOM element.

For example, if we have:

<table>
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
  </tr>
</table>

Then we can make the first tr italic by writing:

$("tr:first").css("font-style", "italic");

Now everything in the tr is italic.

.focus()

The focus method lets us add an event handler for the focus event or trigger the event on an element.

For example, if we have:

<form>
  <input id="target" type="text" value="Field 1">
  <input type="text" value="Field 2">
</form>
<div id="other">
  Trigger the handler
</div>

Then we can add a callback that’s called when the focus event is triggered on the input with ID target by writing:

$("#target").focus(function() {
  console.log("Handler for .focus() called.");
});

:focus Selector

The :focus selector selects an element if it’s currently focused.

For example, if we have the following HTML:

<div id="content">
  <input tabIndex="1">
  <input tabIndex="2">
  <select tabIndex="3">
    <option>select menu</option>
  </select>
  <div tabIndex="4">
    a div
  </div>
</div>

And the following CSS:

.focused {
  background: green;
}

Then we can add the green class to element that’s focused by writing:

$("#content").delegate("*", "focus blur", function() {
  const elem = $(this);
  setTimeout(function() {
    elem.toggleClass("focused", elem.is(":focus"));
  }, 0);
});

The delegate method’s callback has the child elements of the div with ID content as the value of this .

And the callback is called when focus or blur event is triggered on any child element in it.

So we can use toggleClass to toggle the green class on when the element is focused.

The first argument is the class name and the second argument is the condition that toggles on the class in the first argument.

Conclusion

We can select elements with various selectors and focus elements with jQuery.